<!--
 * @Author: caozaihui 15908754730@163.com
 * @Date: 2024-06-14 00:47:40
 * @LastEditors: caozaihui 15908754730@163.com
 * @LastEditTime: 2024-06-27 01:16:45
 * @FilePath: \YMU_forum_vue\src\views\Home\components\right\HomeRight.vue
 * @Description: 主页右侧
-->
<!-- 展示分类与搜索框 -->
<script setup>
import ArticleCardMini from '@/components/article/ArticleCardHot.vue';
import { getIndexHot } from '@/apis/home';
import { Search } from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { getTypes } from '@/apis/article';
const router = useRouter();
const input = ref('');
const jumpSearch = () => {
    router.push({
        path: '/search',
        query: {
            para: input.value
        }
    })
}

const types = ref([])

const articleList = ref([])
// 加载热点文章数据
onMounted(() => {
    // 获取数据
    getIndexHot().then(res => {
        articleList.value = res.data.page.list;
    });
    getTypes().then(res => {
        types.value = res.data
    })
});

</script>

<template>
    <div style="margin-top: 18px">
        <div style="margin-bottom: 10px;">
            <el-text style="color: white;">热门分类</el-text>

            <el-card class="card vague" shadow="never">
                <div class="vague_content">
                    <el-tag class="tag" v-for="type in types">{{ type.name }} </el-tag>
                </div>
            </el-card>
        </div>
    </div>
    <div style="margin-bottom: 10px">
        <el-text style="color: white;">搜索任意</el-text>
    </div>
    <!-- 搜索框 -->
    <el-input class="input" v-model="input" placeholder="在这里查找任意内容">
        <template #prepend>
            <el-button @click="jumpSearch" :icon="Search" />
        </template>
    </el-input>
    <el-badge value="hot" class="item">
        <div style="margin-bottom: 10px;">
            <el-text style="color: white;">最热文章</el-text>
        </div>
    </el-badge>
    <el-card class="card vague" shadow="never">
        <div class="vague_content">
            <ArticleCardMini :articleList="articleList" />
        </div>
    </el-card>

</template>

<style scoped>
.vague {
    position: relative;
    margin: auto;
    border-radius: 5px;
    border: 2px solid rgba(255, 255, 255, 0.5);
}

.vague_content {
    position: relative;
    color: #fff;
    z-index: 10;
}

.vague::after {
    position: absolute;
    content: "";
    background-image: url("https://images.unsplash.com/photo-1440688807730-73e4e2169fb8?dpr=1&auto=format&fit=crop&w=1500&h=1001&q=80&cs=tinysrgb&crop=");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: top;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    filter: blur(10px);
    z-index: 0;
}

.tag {
    margin-top: 7px;
    margin-right: 5px;
}

.item {
    margin-top: 10px;
}

.input {
    height: 35px;
    width: 100%;
    margin-bottom: 20px;
}

.card {
    width: 100%;
    border-radius: 7px;
    margin-bottom: 15px;
}

.mainTitle {
    font-size: 16px;
    color: #4a4a4a;
    font-weight: bolder;
}
</style>